﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>我在这 I am here Web版</title>
    <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html, body {font-size:14px;height: 100%;position:relative;overflow:hidden;}
    #map_canvas {height:100%;min-height:100%;width:100%;position:absolute;left:0;top:0;}
    #pane {line-height:30px;width:230px;position:absolute;right:5px;top:40px;}
    #x, #y {width:80px;}
    h1 {position:absolute;left:50%;top:0;width:320px;margin-left:-160px;text-align:center; white-space:nowrap; overflow:visible;}
    h1 b {color:#F00;}
    #contect_menu{position:absolute;z-index:999;}
    #pane, #contect_menu{background:#FFF;padding:5px;border:1px solid #CCC;-moz-box-shadow: 2px 2px 3px #888;-webkit-box-shadow: 2px 2px 3px #888;box-shadow: 2px 2px 3px #888;-moz-border-radius: 4px;border-radius: 4px;}
    </style>
    <script type="text/javascript">
        var intervalID;
        $(function () {
            // initialize map
            initializeMap();

            SetContextMenu();

            // Refresh result.
            StartRefresh();

            GetMyLocation();
        });

        // Keep track of where you clicked
        var clickedLatLng;
        var contextMenu;
        function SetContextMenu() {
            contextMenu = $("#contect_menu");
            // Disable the browser context menu on our context menu
            contextMenu.bind('contextmenu', function () { return false; });

            google.maps.event.addListener(map, 'rightclick', function (e) {
                // start buy hiding the context menu if its open
                contextMenu.hide();

                var mapDiv = $(map.getDiv()),
		                                x = e.pixel.x,
		                                y = e.pixel.y;

                // save the clicked location
                clickedLatLng = e.latLng;

                // adjust if clicked to close to the edge of the map
                if (x > mapDiv.width() - contextMenu.width())
                    x -= contextMenu.width();

                if (y > mapDiv.height() - contextMenu.height())
                    y -= contextMenu.height();

                // Set the location and fade in the context menu
                contextMenu.css({ top: y, left: x }).fadeIn(100);
            });
            google.maps.event.addListener(map, 'mousedown', function (e) {
                contextMenu.hide();
            });
        }

        function ManuallyGetMyLocation() {
            $("#contect_menu").hide();
            SetMyLocation(clickedLatLng.lat(), clickedLatLng.lng());
            Refresh();

            // Alert user name.
            if ($("#name").val() == "") {
                alert("设置完成, 你还需要填写你的名字");
            }
        }

        function StartRefresh() {
            clearInterval(intervalID);
            intervalID = setInterval(Refresh, 10000);
            Refresh();
        }
        function StopRefresh(){
            clearInterval(intervalID);
        }

        function Refresh() {
            var room = $("#room").val();
            var name = $("#name").val();
            var x = $("#x").val();
            var y = $("#y").val();
            var persist = $("#persist").is(':checked');

            if (room == "") {
                return false;
            }
            if (x == "" || y == "") {
                name = "";
            }

            var targetUrl = "api/submit.ashx?room=" + encodeURIComponent(room) + "&name=" + encodeURIComponent(name) + "&x=" + x + "&y=" + y + "&timestamp=" + TimeStamp() + "&persist=" + persist;

            $.get(targetUrl, function (data) {
                Display(data);
            });
        }

        function TimeStamp() {
            var currentTime = new Date();
            return currentTime.getFullYear()
         + "_" + currentTime.getMonth()
         + "_" + currentTime.getDate()
         + "_" + currentTime.getHours()
         + "_" + currentTime.getMinutes()
         + "_" + currentTime.getSeconds();
        }
        function DateTimeNow() {
            var currentTime = new Date();
            return currentTime.getHours() + "时 "
         + currentTime.getMinutes() + "分钟 "
         + currentTime.getSeconds() + "秒";
        }
        function Display(data) {
            var allPersons = ParseDataAsPersonList(data);
            $("#refresh_time").html(DateTimeNow());
            DisplayOnlineList(allPersons);
            DisplayOnMap(allPersons);
        }
        function DisplayOnlineList(allPersons) {
            var text = "";
            for (var i = 0; i < allPersons.length; i++) {
                text = text + PersonToLink(allPersons[i]) + ", ";
            }
            text = text.substr(0, text.length - 2);
            $("#online_list").html(text);
        }
        function PersonToLink(person) {
            return "<a href='#' title='点击自动导航' onclick='centerMap(" + person.X + ", " + person.Y + ");return false;'>" + person.Name + "<a>"
        }
        function ParseDataAsPersonList(data) {
            var allPersons = new Array();
            var personParts = data.split("\n");
            for (var i = 0; i < personParts.length; i++) {
                var attributeParts = personParts[i].split(",");
                var person = new Object();
                person.Name = attributeParts[0];
                person.X = attributeParts[1];
                person.X = correctCoordinateUnit(person.X);
                person.Y = attributeParts[2];
                person.Y = correctCoordinateUnit(person.Y);
                allPersons.push(person);
            }
            return allPersons;
        }
        function GetMyLocation() {
            // Try W3C Geolocation (Preferred)
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    SetMyLocation(position.coords.latitude, position.coords.longitude);
                    // Center my location.
                    centerMap(position.coords.latitude, position.coords.longitude);
                }, function () {
                    handleNoGeolocation();
                });
                // Try Google Gears Geolocation
            } else if (google.gears) {
                var geo = google.gears.factory.create('beta.geolocation');
                geo.getCurrentPosition(function (position) {
                    SetMyLocation(position.latitude, position.longitude);
                    // Center my location.
                    centerMap(position.latitude, position.longitude);
                }, function () {
                    handleNoGeoLocation();
                });
                // Browser doesn't support Geolocation
            } else {
                handleNoGeolocation();
            }
        }
        function SetMyLocation(x, y) {
            $("#x").val(x);
            $("#y").val(y);
            Refresh();
        }
        function handleNoGeolocation() {
            alert("自动获取坐标失败, 请手动在地图里找出你的位置 -> 右键 -> 设为我的坐标");
        }
        function DisplayOnMap(allPersons) {

            deleteMarkers();

            for (var i in allPersons) {
                var person = allPersons[i];
                var myLatlng = new google.maps.LatLng(person.X, person.Y);
                addMarker(myLatlng, person.Name);
            }
        }
        function correctCoordinateUnit(value) {
            if (value > 1000000) {
                return value / 1000000;
            }
            return value;
        }
</script>
<script type="text/javascript">
    var map;
    var markersArray = [];
    function initializeMap() {
        var myLatlng = new google.maps.LatLng(31.038962, 121.463792);
        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    function centerMap(x, y) {
        var location = new google.maps.LatLng(x, y);
        map.setCenter(location);
    }
    function addMarker(location, title) {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            title: title
        });
        markersArray.push(marker);
    }
    function deleteMarkers() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }
</script>
</head>
<body>

<div id="map_canvas"></div>

<div id="pane">

<form>
    <label for="room">永久数据: </label><input type="checkbox" onchange="Refresh();" id="persist" name="persist" /><br />
    <label for="room">房间名称:</label><input type="text" name="room" id="room" value="公共"  onfocus="StopRefresh();" onblur="StartRefresh();" /><br />
    <label for="name">我的名字:</label><input type="text" name="name" id="name"  onfocus="StopRefresh();" onblur="StartRefresh();" /><br />
    <input type="button" value="提交" /><br />
    我的坐标:<input type="text" name="x" id="x" disabled="true" /><input type="text" name="y" id="y" disabled="true" /><br />
    <span style="font-size:12px;line-height:16px;position:relative;top:-6px;"><a href="#" onclick="GetMyLocation(); return false;">自动获取</a> 或者 手动在地图里找出你的位置 -> 右键 -> 设为我的坐标</span>
</form>
<br />
<!-- refresh time -->
更新时间: <span id="refresh_time"></span><br />
<!-- online list -->
用户列表: <span id="online_list"></span><br />
<a style="font-size:12px;" href="API" target="_blank">我是开发人员, 我想调用这个API</a>
</div>

<h1>请<b>填写你的名字</b></h1>

<div id="contect_menu" style="display:none;"><a href="#" onclick="ManuallyGetMyLocation(); return false;">设为[我的坐标]</a></div>

</body>
</html>
